<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<style>

    #title {
        width: 400px;
        height: 20px;
    }

</style>
<body>
<pre>
    也许并不是那么喜欢你,
        只是刚好遇见你 .
               ------

</pre>
<div style="margin: 0 auto; width: 700px;height: 500px;text-align: center;background-color:lightgray">
    <h2>搜一搜</h2>
    <strong>输入搜索的关键字</strong>
    <input type="text" id="title" name="title" value="" autocomplete="off">
    <input type="button" value="搜一搜">
    <div style="width: 405px;margin-left: 180px;border: 1px solid;text-align:left;display: none" id="showKeyWord"></div>
</div>

</body>

<script>
    $(function () {
        $("#title").keyup(function () {
            var $keyword = $("#title").val();
            if ($keyword.trim().length > 0) {
                $.ajax({
                    url: "RBordServlet",
                    type: "POST",
                    data: {
                        keyword: $keyword.trim()
                    },
                    dataType: "json",
                    success: function (rel) {
                        var $big = $("#showKeyWord");
                        $big.html("");
                        var small = "";
                        if (rel.length > 0) {
                            $.each(rel, function (i, n) {
                                small+="<div class='iu'>";
                                small+=n;
                                small+="</div>";
                            });
                            $big.html(small).css("display","block");
                        }else {
                            $big.css("display","none");
                        }
                    }
                });
            }else {
                $("#showKeyWord").css("display","none");
            }
        });

        $(".iu").live("mouseover",function () {
            $(this).css("backgroundColor","#6877A3");
            $(this).css("cursor","pointer");
        });
        $(".iu").live("mouseout",function () {
            $(this).css("backgroundColor","");
        });
        $(".iu").live("click",function () {
            $("#title").val($(this).html());
            $("#showKeyWord").css("display","none");
        });


    });

</script>

</html>